<!DOCTYPE  html>
<head>
<title>Ingreso</title>
<link rel="stylesheet" href="noti/messi.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css" />
<style>
input[type="number"] { height:30px;}

#total_registros, #buscar { height:20px; 
-webkit-border-radius: 8px;
-webkit-border-top-left-radius: 1px;
-webkit-border-bottom-left-radius: 1px;
-moz-border-radius: 8px;
-moz-border-radius-topleft: 1px;
-moz-border-radius-bottomleft: 1px;
border-radius: 8px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
color:#900;}

.table-hover tbody tr:hover > td,
.table-hover tbody tr:hover > th {
  background-color: #999;
}

.table {
  width: 90%;
  margin-bottom: 20px;
  font-size:12px;
} 

.table td {
  padding: 0px;
  line-height: 20px;
  text-align: center;
  vertical-align: top;
  border-top: 1px solid #dddddd;
}

.table th {  text-align: center; width:300px;}

thead{  color:#666; font-size:14px;}

#contenedor{ width:90%; margin:0 auto 0 auto;}

table{ width:97%;}

a.effect { width: 142px; height: 20px; background-repeat: no-repeat; background-image: url("button_out.gif"); display: block; }
a.effect:hover {
width: 142px;
height: 20px;
background-repeat: no-repeat;
background-image: url("button_over.gif");
display: block;
}

.encabezado_reporte{ font-size:20px; text-transform: uppercase; margin-top: 10px; margin-bottom:10px; margin-left:50%;}

</style>
<style media="print">
#formulario_busqueda { display:none;}
#ordenar_limites{ display:none;}
#contenedor{ width:100%;}
.table{width:100%;}
th{text-transform: uppercase;}
#vistas{ display:none; }
th{ text-align:center; font-size:12px; text-transform: uppercase;}
td{ text-align:center; font-size:10px;}
#formulario_busqueda{ display:none;}

</style>
</head>

<body>


<div id="contenedor" >
   
    <div id="vistas" align="center" style="margin-top:10px;">
    <select name="tabla" class="btn" id="tabla" onChange="actualizar_tabla();">
    <option></option>
    <option value="`resumen factura`" selected >Resumen Factura</option>
    <option value="`totalizado clientes`"  >Total por Cliente</option>
        <option value="`informacion Producto`"  >Informacion Producto</option>
          <option value="`movimiento inventarios`"  >movimiento inventario</option>
    </select>
     <a href="#" class="btn" id="oculta" onClick="ocultar('formulario_busqueda', 'oculta');">ocultar <i class="icon-chevron-up"></i></a>
      
      
     </div>
     
   <div class="encabezado_reporte">Reportes</div>
  <div id="formulario_busqueda" align="center">
    <form name="form_busca" id="form_busca" action="#" method="post">
     <table class="table table-bordered" width="200px">
     
       
        <tr>
        <th>vista Resporte</th>
        <th>Mostrar Columnas</th>
        <th>Buscar</th>
        
        </tr>        
        <tbody>
      <tr>
        
    <td> 

    <input  type="hidden" name="campos" id="campos"  value="`numero factura`, `fecha factura`, `fecha vencimiento`, `estado factura`, `tipo`, `descuento`, `iva`, `total`, `nombre completo`" onChange="cargar_nuevos_campos();"  > 
    
    <select id="campitos" multiple class="span2" style="height:200px;"   >
            
        </select>
    </td>
         
   
        
   <td>  
   <select id="lista_campos"  multiple  style="height:200px;width:150px;"   >
        <option value="">[ columnas ]</option>
        
            </select>
            
            <select id="operador_consulta" multiple style="height:200px; width:100px; " >
          <option value="">[ operador ]</option>
            <option value=">">mayor</option>
            <option value="<">menor</option>
            <option value="like">contenga</option>
            <option value="=">igual</option>
            
        </select>
        
   </td>
        
     <td> 
     
       <div class="input-prepend input-append">  <span class="add-on"><i class="icon-search"></i></span>
          <input class="span2" name="buscar_registro" id="buscar_registro" placeholder="valor a buscar"  type="text">
		
          <select id="ordenar"   class="btn span2"   >
            <option value="" >[ ordenar ]</option>
            <option value="ASC" >Ascendente</option>
            <option value="DESC">Desendente</option>
          </select> 
          </div>    
          
       <div class="input-prepend input-append "> <span class="add-on">Total de registros</span>
          <input type="text"  name="total_registros" class="span2" id="total_registros" readonly>
        </div>
        
        <div class="input-prepend input-append "> <span class="add-on">Registros</span>
          <input type="text"  name="limitante" class="span2" id="limitante" value="20" onChange="cargar_nuevos_campos();" >
        </div> 
        <div>
	   <a class="btn" href="#" onclick="window.print();"><i class="icon-print"></i> Imprimir</a>
       <a class="btn" href="#" onclick="tableToExcel('myTable', 'reporte')"><i class="icon-file"></i> Excel</a>
       <a class="btn btn-success" href="#" onclick="buscar_y_cargar_tabla();"><i class="icon-search"></i> Buscar</a>
        </div>      
       </td>
		  
   
        
        </tr>
        </tbody>
       </table>
       
         
      

    </form>
  </div>
  

  <div id="mi_tabla" align="center">
<div align="center">   
<div id="progreso_tabla" class="progress progress-striped active" style="width:60%;" >
<div class="bar" id="bar" style="width: 0%;" ></div>
</div>
</div>
   <table  class="table table-hover" id="myTable">
  </table>

  
  </div>
   



  <p>&nbsp;</p>

<div id="ordenar_limites">
  <div id="paginacion" align="center"></div>
</div>
</div>
<script src="js/jquery10.2.js" ></script> 
<script src="noti/messi.js"></script> 
<script src="bootstrap/js/bootstrap.js"></script> 
<script src="libreria_javascript/funciones.js"></script> 
<script  src="libreria_javascript/cargar_combo.js" ></script> 
<script  src="libreria_javascript/cargar_options_campos.js" ></script> 
<script  src="libreria_javascript/cargar_options_campos_seleccion.js" ></script> 

<script>


/* campos que va a cambiar de nombre en el formulario  */ 
//var campos_reemplazar = new Array();
var campos_reemplazar = [''];

/* campos que va a reemplazar de nombre en el formulario  */ 
//var campos_reemplazado = new Array();
var campos_reemplazado = [''];

function actualizar_tabla()
{
var tabla = document.getElementById('tabla').value; 

mostrar_combo_campo_seleccion(tabla, '*', 'campitos');

mostrar_combo_campo(tabla, '*', '', 'lista_campos');
	
progress();




}

function progress(){

// $("#bar").show(1000);
//setTimeout(function(){document.getElementById('progreso_tabla').style.display="";},0);
	
setTimeout(function(){$('#progreso_tabla').fadeIn(500, "linear")},400);

$('#myTable').fadeOut( 500, "linear", mostrar_campos);

setTimeout(function(){document.getElementById('bar').style.width="10%"; },400);
setTimeout(function(){document.getElementById('bar').style.width="30%";},400);
setTimeout(function(){document.getElementById('bar').style.width="60%";},400);
setTimeout(function(){document.getElementById('bar').style.width="90%";},400);
setTimeout(function(){document.getElementById('bar').style.width="100%";},400);

$('#myTable').fadeIn(1600, "linear");



//setTimeout(function(){document.getElementById('progreso_tabla').style.display="none";},1600);



//setTimeout(function(){mostrar_campos();  $("#mi_tabla").fadeIn("slow");},1000);
}

</script> 

<script  src="libreria_javascript/reporte.js"></script> 
<script  src="libreria_javascript/reporte_cargar_tabla.js"></script> 


</div>
<div id="resultado"></div>

</body>
</html>